<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{admin/layout}">
<body>

<div class="content-wrap" layout:fragment="content">
    <style>
        .col-lg-offset-1 {
            margin-left: 0;
        }

        .col-lg-8 {
            width: 19.666667%;
        }

        .btn-primary {
            background-color: #64bd63;
            border-color: #64bd63;
        }

    </style>
    <main id="content" class="content" role="main">
        <ol class="breadcrumb">
            <li>苗木管理</li>
            <li class="active">地块划分</li>
        </ol>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-1">
                <section class="widget">
                    <header>
                        <h5>
                            地块划分
                        </h5>
                        <div class="widget-controls">
                            <a data-widgster="collapse" title="Collapse" href="#"><i
                                    class="glyphicon glyphicon-chevron-down"></i></a>
                            <a data-widgster="close" title="Close" href="#"><i
                                    class="glyphicon glyphicon-remove"></i></a>
                        </div>
                    </header>
                    <div class="widget-body" style="margin-left: 0;">
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">地块长度(单位：m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="areah"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">地块宽度(单位：m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="areaw"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">树占地半径(单位：m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="curveR"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">道路宽度(单位：m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="carW"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">拐弯半径(单位：m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="curR"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">选择留路边</label>
                                <div class="col-md-7">
                                    <input type="checkbox" id="bei">北</input>
                                    <input type="checkbox" id="xi">西</input>
                                    <input type="checkbox" id="nan">南</input>
                                    <input type="checkbox" id="dong">东</input>
                                </div>
                            </div>
                        </fieldset>
                        <div class="row">
                            <div class="col-md-offset-4 col-md-7">
                                <button id="submit" class="btn btn-primary">生成地块</button>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div id="areainfo">

        </div>
        <div id="arealist">

        </div>
        <div style="width: 1687px;overflow:auto;">
            <canvas id="c1" width="11900" height="11700"> <!--宽高写在html里，写在css里有问题-->
                <span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
            </canvas>
        </div>
        <script>
            var number2 = currenturl.lastIndexOf("divide");
            var oC;
            var canvas;
            var areah;
            var areaw;
            var curveR;
            var carW;
            var k = 0;
            var treew = 6;//默认为6
            var isbei;
            var isxi;
            var isnan;
            var isdong;
            var dr;
            var db;
            oC = document.getElementById('c1');
            canvas = oC.getContext('2d');
            document.getElementById("submit").onclick = function () {
                alert('tt');
                areah = parseInt(document.getElementById("areah").value);
                areaw = parseInt(document.getElementById("areaw").value);
                treew = parseInt(document.getElementById("curveR").value);
                carW = parseInt(document.getElementById("carW").value);
                isbei = $("#bei").is(':checked');
                isnan = $("#nan").is(":checked");
                isdong = $("#dong").is(":checked");
                isxi = $("#xi").is(":checked");
                dr = isdong ? carW : 0;
                db = isnan ? carW : 0;
                draw();
                oC.onmousemove = function (ev) {
                    var e = ev || window.event;//获取event对象
                    var rect = oC.getBoundingClientRect();
                    var x = e.clientX - rect.left * (oC.width / oC.width);
                    var y = e.clientY - rect.top * (oC.height / oC.height);
                    startx = x;
                    starty = y;
                    findArea(startx, starty);
                };
//                upload();
            };
            function upload() {
                if (areaArray != null) {
                    $.ajax({
                        url: "/admin/areaLocation/save",
                        data: {
                            areaArray: JSON.stringify(areaArray),
                            areah: parseInt(document.getElementById("areah").value),
                            areaw: parseInt(document.getElementById("areaw").value),
                            curveR: parseInt(document.getElementById("curveR").value),
                            carW: parseInt(document.getElementById("carW").value),
                            curR: parseInt(document.getElementById("curR").value),
                        },
                        type: "post",
                        async: true,
                        cache: false,
                        success: function () {

                        }
                    });
                } else {
                    alert("面积太小，生成失败")
                }
            }
            findArea = function (x, y) {
                console.log("x:" + x + "y:" + y);
                if (areaArray == null)return;
                else {
                    var len = areaArray.length;
                    for (var i = 0; i < len; i++) {
                        if (x > areaArray[i].x && x < areaArray[i].x + areaArray[i].w && y > areaArray[i].y && y < areaArray[i].y + areaArray[i].h) {
                            $("#arealist").text("地块:" + (i + 1) + " 可种植:" + areaArray[i].treenumber + "颗树")
//                   alert(areaArray[i].treenumber);
                        }
                    }
                }
            };
            draw = function () {
                canvas.clearRect(0, 0, 11920, 11720);
                k = 0;
                $("#arealist").empty();
                drawArea();
                drawUse();
                console.log("areas:" + areaArray);
                var sum = 0;
                for (var i = 0; i < areaArray.length; i++) {
                    sum += areaArray[i].treenumber;
                }
                $("#areainfo").text("划分" + areaArray.length + "地块,总共可种植" + sum + "棵树")
//        requestAnimationFrame(draw);
            };
            var areaArray;
            function TreeArea(x, y, w, h, treenumber) {
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
                this.treenumber = treenumber;
            }
            drawUse = function () {
                var startx = isxi ? carW : 0;
                var starty = isbei ? carW : 0;
                areaArray = new Array();
                if (areaw > areah) {
                    var treex = Math.ceil(Math.sqrt((70 * (treew * 2) * (treew * 2) * parseInt(areaw)) / parseInt(areah)));//向上取整
                    var treey = parseInt((70 * (treew * 2) * (treew * 2)) / treex);
                    treex -= treex % (2 * treew);
                    treey = parseInt((70 * (treew * 2) * (treew * 2)) / treex);
                    treey -= (treey % (2 * treew))
                } else {
                    var treey = Math.ceil(Math.sqrt((70 * (treew * 2) * (treew * 2) * parseInt(areah)) / parseInt(areaw)));//向上取整
                    var treex = parseInt((70 * (treew * 2) * (treew * 2)) / treey);
                    if (treey % (2 * treew) < treew) {
                        treey -= treey % (2 * treew);
                        treex = parseInt((70 * (treew * 2) * (treew * 2)) / treey);
                        treex -= (treex % (2 * treew))
                    }
                }

                var i = 0;
                var j = 0;
                var rightx;
                while (true) {
                    if (startx + dr + treex <= areaw || starty + db + treey <= areah) {
                        if (startx + dr + treex >= areaw) {
                            startx = isxi ? carW : 0;
                            starty += treey;
                        }
                        if (starty + db + treey < areah) {
                            drawUseArea(startx, starty, treex, treey);
                            startx += carW + treex;
                            rightx = startx;
                        } else {
                            break
                        }
                    } else {
                        break;
                    }
                }
                //下部收尾
                starty = starty + carW;
                var bottomy = starty - carW;
                treey = areah - starty - db;
                if (treey >= treew) {
                    treex = parseInt((70 * (treew * 2) * (treew * 2)) / treey);
                    if (treex % (2 * treew) < treew) {
                        treex -= treex % (2 * treew);
                    } else {
                        treex += (2 * treew - (treex % (2 * treew)));
                    }
                    while (true) {
                        if (startx + dr + treex <= areaw || starty + db + treey <= areah) {
                            if (startx + dr + treex >= areaw) {
                                if (startx + dr < areaw) {
                                    drawUseArea(startx, starty, areaw - dr - startx, treey);
                                }
                                startx += carW + treex;
                                break;
                            }
                            drawUseArea(startx, starty, treex, treey);
                            startx += treex;
                        } else {
                            break;
                        }
                    }
                } else {
                    bottomy = areah - db;
                }
                //右部收尾
                starty = isbei ? carW : 0;
                startx = rightx;
                treex = areaw - startx - dr;
                if (treex >= treew) {
                    treey = parseInt((70 * (treew * 2) * (treew * 2)) / treex);
                    if (treey % (2 * treew) < treew) {
                        treey -= treey % (2 * treew);
                    } else {
                        treey += (2 * treew - (treey % (2 * treew)));
                    }
                    while (true) {
                        if (startx + dr + treex <= areaw || starty + treey <= bottomy) {
                            if (starty + treey > bottomy) {
                                if (starty < bottomy) {
                                    drawUseArea(startx, starty, treex, bottomy - starty);
                                }
                                starty += carW + treey;
                                break;
                            }
                            drawUseArea(startx, starty, treex, treey);
                            starty += treey;
                        } else {
                            break;
                        }
                    }
                }
            };
            drawArea = function () {
                canvas.strokeStyle = "green";
                canvas.lineWidth = 1;
                canvas.strokeRect(0, 0, areaw, areah); //绘制一个带填充的矩形
            };
            var flag = 0;
            drawUseArea = function (x, y, w, h) {
                ++k;
                canvas.strokeStyle = "black";
                canvas.lineWidth = 1;
                canvas.strokeRect(x, y, w, h); //绘制一个带填充的矩形
                canvas.strokeText(k + "", x + w / 2.0 - 5, y + h / 2.0 + 5);
                var row = Math.floor(w / (2 * treew));
                var col = Math.floor(h / (2 * treew));
                if (flag < 2) {
                    if (x == areaw && y == areaw) {
                        ++flag;
                    }
                    if (flag < 2) {
                        var area = new TreeArea(x, y, w, h, row * col);
                        areaArray.push(area);
                    }
                }
                var startx = x + 2 * treew - 2;
                var starty = y + 2 * treew - 2;
                for (var i = 0; i < col; i++) {
                    for (var j = 0; j < row; j++) {
                        drawTree(startx, starty, 1)
                        startx += 2 * treew;
                    }
                    startx = x + 2 * treew - 2;
                    starty += 2 * treew;
                }
            };
            drawTree = function (x, y, r) {
                canvas.beginPath();
                canvas.fillStyle = "green";
                canvas.arc(x, y, r, 0, 2 * Math.PI);
                canvas.fill();
            }
            function drawline(x1, y1, x2, y2) {
                oCG.beginPath();
                oCG.moveTo(x1, y1);
                oCG.lineTo(x2, y2);
                oCG.strokeStyle = linecolor;
                oCG.stroke();
            }
        </script>
    </main>
</div>
</body>
</html>